<template>
  <view class="page-index-format">
    <Toast ref="ToastRef" />
    <Loader ref="LoaderRef" />
    <OrderPopup ref="OrderPopupRef" @ok="handleRuleInfo" />
    <Header text="选餐方式"> </Header>
    <yu-datetime-picker
      ref="DateTimeRef"
      current
      :isAll="false"
      @confirm="handleDateConfirm"
    ></yu-datetime-picker>
    <view class="container">
      <view class="bg"></view>
      <view class="text">选择选餐方式</view>
      <view class="btns">
        <view class="btn" @click="handleChooseType(11)">堂食</view>
        <view class="btn" @click="DateTimeRef.show()" v-if="store.isBook.value">
          预订
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from "vue";
import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue";
import store from "@/store/index";

const emit = defineEmits(["tab"]);
const DateTimeRef = ref();
const LoaderRef = ref();
const ToastRef = ref();
const handleChooseType = (type) => {
  store.state.orderType = type;
  emit("tab", "HOME");
};
const handleDateConfirm = (val) => {
  if (new Date(val.selectRes).getTime() - 5 * 60 * 1000 > new Date().getTime()) {
    store.state.expectAt = val.selectRes;
    handleChooseType(31);
  } else {
    ToastRef.value.show({
      title: "抱歉",
      content: "预定出错，早于当前时间5分钟才可以预订",
    });
  }
};

defineExpose({
  __onPageMounted: async () => {},
  __onPageLoad: (opts) => {},
  __onPageShow: () => {},
  __onPageLeave: () => {},
  __onPageEnter: () => {
    store.state.menuList = [];
    store.state.orderType = null;
  },
});
</script>
<style scoped lang="scss">
.page-index-format {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  & > .container {
    position: relative;
    height: 100%;
    width: 100%;
    & > .bg {
      background-image: var(--Img_ChooseWay_Bg);
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;
      height: 600rpx;
      width: 100%;
      margin-bottom: 60rpx;
    }
    & > .text {
      font-size: 38rpx;
      margin-bottom: 100rpx;
      text-align: center;
    }
    & > .btns {
      display: flex;
      justify-content: space-around;
      padding: 0 60rpx;
      .btn {
        line-height: 1;
        padding: 25rpx 100rpx;
        font-size: 32rpx;
        border-radius: 10rpx;
        text-align: center;
        background: var(--Main_Color);
        color: #fff;
      }
    }
  }
}
</style>
